<template>
	<view class="input_class">
		<view class="mengbic" v-if="showimg==0" @click="closeFn">
			
		</view>
		<view class="imagw" v-if="showimg==0" >
			<image mode="widthFix"  src="https://shengyue.yaoyunxin.cn/uploads/images/20240127/2024012710535950b6f4917.png" class="img-laba" @click="tiaozFn"></image>
		</view>
		<view class="name_class4">
			<span class="name" style="width:28%"><span class="start">*</span>药材名称</span>
			<!-- <input :placeholder-style="inputPlaceHolderStyle" class="input" type="text" placeholder="请输入药材名称"
				v-model="userInfo1.medicinal"> -->
				<textarea class="yemian" placeholder="请输入药材名称,例如:白术,人参" v-model="userInfo1.medicinal"></textarea>
		</view>
		<view class="" v-for="(item,index) in userInfo1.contacts" :key="index">
			<view class="name_class">
				<span class="name"><span class="start">*</span>联系人</span>
				<input :placeholder-style="inputPlaceHolderStyle" class="input" type="text" placeholder="请输入姓名"
					v-model="item.name">
			</view>
			<view class="name_class">
				<span class="name"><span class="start">*</span>联系电话</span>
				<input :placeholder-style="inputPlaceHolderStyle" type="text" placeholder="请输入电话号码"
					v-model="item.tel">
			</view>
		</view>
		<view class="name_class2"  @click="addlian">
			<span>
				<image style="width: 24rpx;height: 24rpx;" src="../../static/images/jia.png" mode=""></image>
			</span>
			<span class="tianjia">添加联系方式</span>
		</view>
		<view class="name_class2"  @click="dellian">
			<span>
				<!-- <image style="width: 24rpx;height: 24rpx;" src=".." mode=""></image> -->
				<!-- <image style="width: 24rpx;height: 24rpx;" src="../../static/images/jia.png" mode=""></image> -->
				<image style="width: 24rpx;height: 24rpx;" src="../../static/images/jian.png" mode=""></image>
				<!-- <image src="" mode=""></image> -->
			</span>
			<span class="red">删除联系方式</span>
			
		</view>
	<!-- 	<view class="name_class3">
			<span class="name"><span class="start">*</span>规格</span>
			<input :placeholder-style="inputPlaceHolderStyle" class="input" type="text" placeholder="请输入规格"
				v-model="userInfo1.specifications">
		</view> -->
	<!-- 	<view class="name_class">
			<span class="name"><span class="start">*</span>库存地</span>
			<view style="position: relative;" @click="getAddress">
				<input :placeholder-style="inputPlaceHolderStyle" class="input-address" type="text" placeholder="请选择库存地"
					v-model="userInfo1.producer" disabled>
				<image class="left" src="https://jiechendy.sdshengyue.cn/uploads/8a/206fe6237202dec13798180795aeb1.png">
				</image>
			</view>
		</view> -->
			<view class="name_class">
				<span class="name"><span class="start">*</span>库存地</span>
				<view>
					<input :placeholder-style="inputPlaceHolderStyle" type="text" placeholder="请输入库存地"
						v-model="userInfo1.producer">
				</view>
			</view>
<!-- 		<view class="name_class">
			<span class="name"><span class="start">*</span>价格</span>
			<input :placeholder-style="inputPlaceHolderStyle" class="input" type="text" placeholder="请输入价格,如20元/公斤"
				v-model="userInfo1.jiage">
		</view>
		<view class="name_class">
			<span class="name"><span class="start">*</span>数量</span>
			<input :placeholder-style="inputPlaceHolderStyle" class="input" type="text" placeholder="请输入数量"
				v-model="userInfo1.num">
		</view> -->

		<view class="center">
			<view class="card-text">
				<span class="start">*</span>请拍摄并上传您的封面照片
			</view>
			<view class="card-img">
				<view class="card-img2" @click="zphotoFn">
					<!-- <image class="img" src="../../static/images/zhaopian.png" v-if="userInfo.fming==''"></image> -->
					<image class="img" src="../../static/images/zhaopian.png" v-if="userInfo1.fming==''"></image>
					<image class="img" :src="userInfo1.fming" v-else></image>
				</view>
			</view>

		</view>
		<view class="name_class1">
			<span class="name"><span class="start">*</span>详情信息</span>
			<!-- <input :placeholder-style="inputPlaceHolderStyle"
				type="text" placeholder="请输入电话号码" v-model="userInfo.tel"> -->
			<textarea maxlength='-1' style="width: 100%; margin-top: 10rpx;"  class="yemian" placeholder="请输入简介" v-model="userInfo1.jjxq"></textarea>
		</view>

	<!-- 	<view class="fuwenban">
			<view class="">
				<span class="name"><span class="start">*</span>详情信息</span>
			</view>
			<piaoyiEditor :values="value1" :maxlength="3000" @changes="saveContens" :readOnly="readOnly"
				:photoUrl="photoUrl" :api="api" :name="name" :token="token1" />
		</view> -->
		<view class="center1">
			<!-- <view class="card-text">
				<span class="start">*</span>请选择详情信息图片
			</view> -->
			<view class="card-text1">
				<view class="">
					<span class="start">*</span>请选择详情信息图片
				</view>
				<view style="margin-left: auto;">
					<image style="width: 44rpx;height: 44rpx;" src="../../static/images/delimg.png" mode="" @click="delImg" v-if="userInfo1.ycxq.length>=1"></image>
				</view>
			</view>
			<view class="card-img1">
				<view class="card-img3">
					<image v-for="(item,index) in userInfo1.ycxq" class="img1" :src="item" v-if="userInfo1.ycxq.length>=1" @click="zphotoFn1(index)" mode="widthFix"></image>
					<image class="img1" src="../../static/images/zhaopian.png" v-if="userInfo1.ycxq.length<=8" @click="zphotoFn1(-1)" mode="widthFix"></image>
				</view>
			</view>
		
		</view>
	</view>
<view class="notification" v-if="show">
			<view class="notification-top">
				认证信息
			</view>
			<view class="notification-center">
				{{text}}
			</view>
			<view class="notification-bottom">
				<view class="notification-bottom-left" @click="quxiaoFn">
					取消
				</view>
				<view class="notification-bottom-right" @click="delFn">
					确定
				</view>
			</view>
		</view>
		<view class="mengbi" v-if="show">
			
		</view>
	<view class="bitton" @click="emitFn">
		发布
	</view>
	<view class="bottom">

	</view>
</template>
<script setup>
	import piaoyiEditor from '@/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue';
	import { uploadImage } from '@/api/app'
	import {
		ref,
		reactive,
		computed
	} from 'vue'
	import {
		postFAbu
	} from '@/api/news'
	import {
		useUserStore
	} from '@/stores/user'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onShow,onLoad
	} from '@dcloudio/uni-app'
	const userStore = useUserStore()
	const {
		userInfo,
		isLogin,
		token,
		showimg
	} = storeToRefs(userStore)
	const text=ref('')
	onShow(() => {
		userStore.getUser().then(()=>{
			if(userInfo.value.qualifications==0){
				show.value=true
				text.value="请提交认证过信息后发布"
			}
			if(userInfo.value.qualifications==2){
				show.value=true
				text.value="正在审核请稍后"
			}
		})
		// console.log(token.value,'token');
		
	})

	const show=ref(false)
const token1=token.value
onLoad(() => {
		userStore.getUser()
		if(userInfo.value.vip_times=='0'&&showimg.value==0){
			showimg.value='0'
		}
		// console.log(isLogin.value,'isLogin');
	
	})
	const readOnly=ref(false)
	const photoUrl = ref('https://www.yaoyunxin.cn')
	const api = ref('/api/upload/image')
	const name = ref('file')
	const inputPlaceHolderStyle = ref("color:#AAAAAA")
	const value1=ref('')
	// const contacts=ref()
	const userInfo1 = ref({
		contacts:[{
			name: '',
			tel: null
		}],
		producer: '',
		medicinal: '',
		specifications: '',
		fming: '',
		jiage: '',
		num: '',
		jjxq: '',
		ycxq: []
	})
	// const showimg=ref(1)
	const closeFn=()=>{
		showimg.value=1
		console.log('取消');
	}
	const tiaozFn=()=>{
		uni.navigateTo({
			url:'/pages/user/member'
		})
	}

const saveContens=(e)=>{
    userInfo1.value.ycxq=e.html
	console.log(e.html,'e.html');
	console.log(userInfo1.value.ycxq,'userInfo1.value.ycxq');
}
const addlian=()=>{
	console.log(11111);
	console.log(userInfo1.value.contacts.length);
	if(userInfo1.value.contacts.length>6){
		uni.showToast({
			title:"联系人最多添加七个",
			icon:"none"
		})
		return false
	}
	userInfo1.value.contacts.push({
		name: '',
		tel: null
	})
}

const delImg=()=>{
	if(userInfo1.value.ycxq.length>=1){
		userInfo1.value.ycxq.pop()
		console.log(userInfo1.value.ycxq,'userInfo1.value.ycxq');
	}
}
const dellian=()=>{
	if(userInfo1.value.contacts.length>=2){
		userInfo1.value.contacts.pop()
	}
}
	const getAddress = () => {
		uni.chooseLocation({
			success: (res) => {
				userInfo1.value.producer = res.address
			}
		});
	}

	const zphotoFn = () => {
		uni.chooseImage({
			count: 1, // 最多选择一张图片
			sourceType: ['album', 'camera'], // 只允许从相机选择
			sizeType: ['original', 'compressed'],
			quality: 50,
			success: (res) => {
				// console.log(res)
				const tempFilePaths = res.tempFilePaths
				// console.log(res.tempFilePaths[0],'res.tempFilePaths[0]');
				uploadImageIng(res.tempFilePaths[0]+'')
				// console.log(userInfo.value.frontCard,'userInfo.value.frontCard');

			}
		})
	}
const zphotoFn1 = (index) => {
		// if(index!=-1){
		// 	userInfo1.value.ycxq.
		// }
		uni.chooseImage({
			count: 1, // 最多选择一张图片
			sourceType: ['album', 'camera'], // 只允许从相机选择
			sizeType: ['original', 'compressed'],
			quality: 50,
			success: (res) => {
				// console.log(res)
				const tempFilePaths = res.tempFilePaths
				// aa=tempFilePaths
				
				uploadImageIng1(res.tempFilePaths[0]+'',index)
				console.log(res.tempFilePaths,'res.tempFilePaths[0]');
				
				// console.log(userInfo.value.frontCard,'userInfo.value.frontCard');
	
			}
		})
	}
	const uploadImageIng1 = async (file,index) => {
		uni.showLoading({
			title: '正在上传中...'
		})
	
		try {
			const res = await uploadImage(file)
			uni.hideLoading()
			if(index==-1){
				userInfo1.value.ycxq.push(res.uri)
			}else{
				userInfo1.value.ycxq[index]=res.uri
			}
			// console.log(res,'res');
		} catch (error) {
			uni.hideLoading()
			uni.$u.toast(error)
		}

	}

	const uploadImageIng = async (file) => {
		uni.showLoading({
			title: '正在上传中...'
		})
		try {
			const res = await uploadImage(file)
			uni.hideLoading()

			userInfo1.value.fming = res.uri
			// console.log(res,'res');
		} catch (error) {
			uni.hideLoading()
			uni.$u.toast(error)
		}

	}

const delFn=()=>{
	if(userInfo.value.qualifications==2){
		uni.navigateBack(-1)
		return false
	}
	uni.navigateTo({
		url:'/pages/user_data/user_data'
	})
}
const quxiaoFn=()=>{
		show.value = false
		uni.navigateBack(-1)
	}
	const emitFn = async () => {
	uni.showLoading({
			title:'加载中',
			mask:true
		})
		// console.log(userInfo.value.id);
		if (userInfo1.value.medicinal == '') {
			uni.showToast({
				title: '请输入药材名称',
				icon: "none",
			});
			return false
		}

		var reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
		let a=0
		userInfo1.value.contacts.forEach(item=>{
			console.log(item,'item');
			
			if (item.name == '') {
				console.log('buxianshi');
				uni.showToast({
					title: '请输入姓名',
					icon: "none",
				});
				a=1
				   return;
				// return false
				// break;
			}
			if (item.tel == null) {
				uni.showToast({
					title: '请输入电话号',
					icon: "none",
				});
				a=1
				   return;
				// return false
				// break;
			}
			if (!reg.test(item.tel)) {
				uni.showToast({
					title: '手机格式错误',
					icon: "none",
				});
				a=1
				// return false;
				// break;
			}
		})
		if(a==1){
			return false
		}
		
		// if (userInfo1.value.specifications == '') {
		// 	uni.showToast({
		// 		title: '请输入规格',
		// 		icon: "none",
		// 	});
		// 	return false
		// }
		if (userInfo1.value.producer == '') {
			uni.showToast({
				title: '请选择库存地',
				icon: "none",
			});
			return false
		}
		// if (userInfo1.value.jiage == '') {
		// 	uni.showToast({
		// 		title: '请输入价格',
		// 		icon: "none",
		// 	});
		// 	return false
		// }
		// if (userInfo1.value.num == '') {
		// 	uni.showToast({
		// 		title: '请输入数量',
		// 		icon: "none",
		// 	});
		// 	return false
		// }
		if (userInfo1.value.fming == '') {
			uni.showToast({
				title: '请输入封面照片',
				icon: "none",
			});
			return false
		}
		if (userInfo1.value.jjxq == '') {
			uni.showToast({
				title: '请输入药材简介',
				icon: "none",
			});
			return false
		}
		if (userInfo1.value.ycxq.length==0) {
			uni.showToast({
				title: '请选择详情信息图片',
				icon: "none",
			});
			return false
		}
		let data = await postFAbu({
			name: userInfo1.value.medicinal,
			contacts: userInfo1.value.contacts,
			// specifications: userInfo1.value.specifications,
			producer: userInfo1.value.producer,
			fming:userInfo1.value.fming,
			ycxq:userInfo1.value.ycxq,
			jjxq:userInfo1.value.jjxq,
			// jiage:userInfo1.value.jiage,
			// num:userInfo1.value.num
		})
		uni.hideLoading();
		// uni.navigateBack(-1)
		uni.navigateTo({
			url: '/pages/collection/collection'
		});
		// userInfo1.value.medicinal = ''
		// userInfo1.value.specifications = ''
		// userInfo1.value.producer = ''
		// userInfo1.value.num=''
		// userInfo1.value.jiage=''
		// userInfo1.value.jjxq=''
		// userInfo1.value.ycxq=''
		// userInfo1.value.contacts=[{
		// 	name: '',
		// 	tel: null
		// }]
		// userInfo1.value.fming=''
		// // console.log(data);
		// value1.value=''
		// if (data.data == 1) {
		// 	uni.showToast({
		// 		title: "提交成功",
		// 		icon: "none"
		// 	})
		// }
		// setTimeout(()=>{
		// },2000)
	}
</script>

<style lang="scss" scoped>
	.mengbic{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.2);
		z-index: 998;
	}
	.imagw{
		width: 750rpx;
		height: 730rpx;
		position: absolute;
		top: 274rpx;
		left: 50%;
		transform: translate(-50%,0);
		z-index:999;
	}
	.img-laba{
		// width: 750rpx;
		// height: 730rpx;
		width: 80%;
		margin-left: 10%;
	}
	.card-text1{
		display: flex;
		width: 100%;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
		padding:20rpx;
	}
	.name_class4{
		display: flex;
		justify-content: space-between;
		height: 200rpx;
		background-color: #fff;
		// line-height: 100rpx;
		box-sizing: border-box;
		border: 2rpx solid #F8F8F8;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 25rpx;
	}
	.yemian {
		height: 154rpx;
		background-color: #fff;
	}
	
	.red{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #ff4d4d;
		// margin-left:424rpx;
		// display: inline-block;
	}
	.center1{
		width: 100%;
		// height: 230rpx;
		background: #FFFFFF;
		opacity: 1;
	}
	.card-img3{
		width: 100%;
		// height: 300rpx;
		display: flex;
		padding-bottom: 20rpx;
		flex-wrap: wrap;
		 
		// justify-content: space-evenly;
	}
	.img1{
		width: 120rpx;
		height: 120rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		// margin-right: 30rpx;
		margin: 10rpx 30rpx;
	}
	.notification {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 614rpx;
		// height: 282rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		z-index: 43;
	
		.notification-top {
			text-align: center;
			margin-top: 36rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;
	
		}
	
		.notification-center {
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-top: 22rpx;
			margin-bottom: 34rpx;
	
		}
	
		.notification-bottom {
			display: flex;
			justify-content: space-evenly;
			text-align: center;
			align-items: center;
			border-top: 1rpx solid #EEEEEE;
			height: 126rpx;
		
			.notification-bottom-left {
				width: 40%;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333;
				background-color: #efefef;
		
			}
		
			.notification-bottom-right {
				width: 40%;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #fff;
				background-color: #19C181;
		
			}
		}
	}
	.mengbi {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 33;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.name_class3 {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		background-color: #fff;
		// line-height: 100rpx;
		box-sizing: border-box;
		border: 2rpx solid #F8F8F8;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 25rpx;
	}

	.tianjia {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #19C281;
	}

	.fuwenban {
		background-color: #fff;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 25rpx;
	}

	.name_class2 {
		height: 100rpx;
		background-color: #fff;
		// line-height: 100rpx;
		box-sizing: border-box;
		border: 2rpx solid #F8F8F8;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 25rpx;
	}

	.name_class1 {
		// display: flex;
		// justify-content: space-between;
		height: 270rpx;
		background-color: #fff;
		// line-height: 100rpx;
		box-sizing: border-box;
		border: 2rpx solid #F8F8F8;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 25rpx;
	}

	.yemian {
		height: 154rpx;
		background-color: #fff;
	}

	.name {
		padding-top: 5rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.input-address {
		margin-right: 40rpx;
	}

	.start {
		color: red;
	}

	.left {
		position: absolute;
		right: 0;
		width: 30rpx;
		height: 27rpx;
		top: 12rpx;
	}



	.input_class {
		margin-top: 20rpx;
	}

	.name_class {
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		background-color: #fff;
		// line-height: 100rpx;
		box-sizing: border-box;
		border: 2rpx solid #F8F8F8;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 25rpx;
	}

	.name {
		padding-top: 5rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;

	}

	input {
		// color: #cccccc;
		width: 378rpx;
		text-align: right;
		height: 34rpx;
		// border-radius: 0rpx 0rpx 0rpx 0rpx;
		// opacity: 1;
		width: 378rpx;
		height: 34rpx;
		font-size: 24rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;


	}

	input::placeholder {
		color: red !important;
	}

	.placeholder {
		color: #AAAAAA;
	}

	.center {
		// width: 690rpx;
		width: 100%;
		height: 230rpx;
		background: #FFFFFF;
		opacity: 1;
	}

	.card-text {
		width: 388rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
		padding-left: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		// margin: 14rpx 44rpx 12rpx 46rpx;
	}

	.card-img {
		display: flex;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.card-img2 {
		width: 120rpx;
		height: 120rpx;
	}

	.card-text2 {
		width: 314rpx;
		height: 56rpx;
		background: #2568BC;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		text-align: center;
		color: #FFFFFF;
		line-height: 56rpx;
	}

	.bitton {
		// position: absolute;
		// bottom: 54rpx;
		margin-top: 60rpx;
		width: 690rpx;
		height: 104rpx;

		background: linear-gradient(90deg, #59C381 0%, #61D59A 42%, #6AE9B5 100%);

		border-radius: 16rpx 16rpx 16rpx 16rpx !important;
		opacity: 1;
		border-radius: 72rpx;
		text-align: center;
		line-height: 104rpx;
		color: #FFFFFF;
		margin-left: 30rpx;
	}

	.bottom {
		height: 122rpx;
	}

	.center {
		// width: 690rpx;
		width: 100%;
		height: 230rpx;
		background: #FFFFFF;
		opacity: 1;
	}

	.card-text {
		width: 388rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
		padding-left: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		// margin: 14rpx 44rpx 12rpx 46rpx;
	}

	.card-img {
		display: flex;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.card-img2 {
		width: 120rpx;
		height: 120rpx;
	}

	.card-text2 {
		width: 314rpx;
		height: 56rpx;
		background: #2568BC;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		text-align: center;
		color: #FFFFFF;
		line-height: 56rpx;
	}
</style>